<template>
  <el-menu
    active-text-color="#e06e03"
    :default-active="active"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    :router="true"
  >
    <el-menu-item index="/home">首页</el-menu-item>
    <el-menu-item index="/recognize">认识病毒</el-menu-item>
    <el-menu-item index="/story">抗疫故事</el-menu-item>
    <el-menu-item index="/news">疫情新况</el-menu-item>

    <el-menu-item index="/exam">知识竞赛</el-menu-item>
    <el-menu-item index="/lecture">防疫讲堂</el-menu-item>
    <el-menu-item style="float:right">
      <Button></Button>
    </el-menu-item>
    <el-menu-item v-if="token!='' ? false:true" style="float:right">
      <router-link to="/user/login">登录</router-link>
    </el-menu-item>

    <el-submenu v-if="token=='' ? false:true" style="float:right">
      <template slot="title">
        <el-avatar :src="avatar"></el-avatar><span>{{username}}</span>
      </template>

      <el-menu-item ><div @click="logout()">注销 </div></el-menu-item>
      <el-menu-item>
        <router-link to="/info">个人中心</router-link>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
import Button from "@/components/uploadButton.vue";
import {mapGetters} from "vuex"
export default {
  components: {
    Button,
  },
  data() {
    return {
      
      active: this.$route.matched[1].path,
      
    };
  },
  methods: {
    handleSelect() {
      console.log(this.$route);
    },
    userInfo() {
      
      
      
      this.$store.dispatch("GetInfo").then(() => {
      
      })
    },
    logout(){ 
     
      this.$store.dispatch("Logout").then(() =>{ 
        this.isLogin=false
      })
    }
  },
  created() {
    
    this.userInfo();
  },
  computed:{ 
     ...mapGetters([
      'avatar',
      'username',
        "token"
    ])
  }
};
</script>
<style>
.el-menu{ 
  font-weight: 900;
}
</style>
